<!--D音配置-->
<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never" body-style="padding: 0;">
          <el-tabs v-model="active" class="user-info-tabs">
            <el-tab-pane label="D音配置" name="info">
              <el-form
                ref="form"
                :model="form"
                label-width="100px"
                style="max-width: 850px; padding: 34px 20px 0 20px"
                @keyup.enter.native="save"
                @submit.native.prevent
              >
                <el-form-item label="ClientKey:" prop="configurationKey">
                  <el-input
                    v-model="form.configurationKey"
                    placeholder="请输入ClientKey"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="ClientSecret:" prop="ClientSecret">
                  <el-input
                    show-password
                    v-model="form.configurationValue"
                    placeholder="请输入ClientSecret"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="授权回调1:" style="width: 840px">
                  <div  class="flex-align-center">
                    <el-input
                      v-model="host"
                      disabled
                      clearable>
                      <template slot="prepend">https://</template>
                      <template slot="append">/business/matrix/account/openAuthCB</template>
                    </el-input>
                    <el-button type="primary" style="margin-left: 20px"   @click="copyAddress(callbackAddress2)" :disabled="callbackAddress2 ? false : true">复制</el-button>
                  </div>
                </el-form-item>

                <el-form-item label="授权回调2:" style="width: 840px">
                  <div  class="flex-align-center">
                    <el-input
                      v-model="host"
                      disabled
                      clearable>
                      <template slot="prepend">https://</template>
                      <template slot="append">/business/szrRelease/openAuthCB</template>
                    </el-input>
                    <el-button type="primary" style="margin-left: 20px"   @click="copyAddress(callbackAddress3)" :disabled="callbackAddress3 ? false : true">复制</el-button>
                  </div>
                </el-form-item>

                <el-form-item label="WebHooks:" style="width: 840px">
                  <div  class="flex-align-center">
                    <el-input
                      v-model="host"
                      disabled
                      clearable>
                      <template slot="prepend">https://</template>
                      <template slot="append">/business/matrix/account/openWebHooksCreateVideo</template>
                    </el-input>
                    <el-button type="primary" style="margin-left: 20px"   @click="copyAddress(webHooks)" :disabled="webHooks ? false : true">复制</el-button>
                  </div>
                </el-form-item>


                <!-- <el-form-item label="WebHooks:" style="width: 840px">
                   <div class="flex-align-center">
                     <el-input
                       show-password
                       v-model="form.WebHooks"
                       placeholder="请输入WebHooks"
                       clearable
                     />
                     <el-button type="primary" style="margin-left: 20px"   @click="copyAddress(form.WebHooks)">复制</el-button>
                   </div>
                 </el-form-item>-->
                <el-form-item>
                  <el-button type="primary" :loading="loading" @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <!-- 头像裁剪弹窗 -->
    <ele-cropper-dialog
      :src="form.avatar"
      :show.sync="visible"
      :lock-scroll="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :options="{ autoCropArea: 1, viewMode: 1, dragMode: 'move' }"
      @crop="onCrop"
    />
  </div>
</template>

<script>
  import EleCropperDialog from 'ele-admin/es/ele-cropper-dialog';
  import {
    dyKsPage,
    updateDy
  } from '@/api/merchantAccount';
  export default {
    name: 'UserProfile',
    components: { EleCropperDialog },
    data() {
      return {
        host:window.location.host,
        callbackAddress2:'https://'+window.location.host+'/business/matrix/account/openAuthCB',
        callbackAddress3:'https://'+window.location.host+'/business/szrRelease/openAuthCB',
        webHooks:'https://'+window.location.host+'/business/matrix/account/openWebHooksCreateVideo',
        // tab页选中
        active: 'info',
        // 表单数据
        form: {},

        // 保存按钮loading
        loading: false,
        // 是否显示裁剪弹窗
        visible: false
      };
    },
    computed: {
      // 登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      },
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.init()
      Object.assign(this.form, this.loginUser, {
        tellPre: '0752',
        tell: ''
      });
    },
    methods: {
      // 复制链接
      copyAddress(val) {
        if(!val){
          this.$message.error("请先输入回调地址！")
          return
        }
        var copyInput = document.createElement("input"); // 创建元素
        //val是要复制的内容
        copyInput.setAttribute("value", val);
        document.body.appendChild(copyInput);
        copyInput.select();
        try {
          var copyed = document.execCommand("copy");
          if (copyed) {
            document.body.removeChild(copyInput);
            this.$message.success("复制成功");
          }
        } catch {
          this.$message.error("复制失败，请检查浏览器兼容");
        }
      },
      init(){
        dyKsPage({
          // types 1是抖音 2是快手
          types:1,
          oemId:this.$store.state.user.info.oemId
        }).then((msg) => {
          this.form=msg && msg!=null ? msg : this.form
          var host =window.location.host;//域名
          this.form.WebHooks= 'https://'+ host+'/business/matrix/account/openWebHooksCreateVideo'
          // this.form.WebHooks= 'https://yuntt.weijuyunke.com/business/matrix/account/openWebHooksCreateVideo'
          /* if(this.form.callbackAddress){
             var i1 = this.form.callbackAddress.lastIndexOf("/business/matrix/account/openAuthCB"); //3
             let address=this.form.callbackAddress.slice(0, i1);
             this.callbackAddress2=address.slice(8);
           }*/
          this.$emit('done');
        })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      /* 保存更改 */
      save() {
        if(!this.form.configurationKey){
          this.$message.error('请输入ClientKey')
          return
        }
        if(!this.form.configurationValue){
          this.$message.error('请输入ClientSecret')
          return
        }
        /*if(!this.callbackAddress2){
          this.$message.error('请输入回调地址')
          return
        }
        this.form.callbackAddress = 'https://'+this.callbackAddress2 + '/business/matrix/account/openAuthCB'*/
        this.loading = true;
        const data = {
          ...this.form,
          types:1,  //类型 1抖音 2快手 快手配置传2
          oemId:this.$store.state.user.info.oemId  //代理ID
        };
        updateDy(data).then((msg) => {
          this.loading = false;
          this.$message.success('保存成功！');
          this.init()
          this.$emit('done');
        })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },

      /* 头像裁剪完成回调 */
      onCrop(result) {
        this.form.avatar = result;
        this.visible = false;
        this.updateLoginUser(this.form);
      },
      /* 打开图片裁剪 */
      openCropper() {
        this.visible = true;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .ele-body {
    padding-bottom: 0;
  }

  .el-card {
    margin-bottom: 15px;
  }

  /* 用户资料卡片 */
  .user-info-card {
    padding: 8px 0;
    text-align: center;

    .user-info-avatar-group {
      position: relative;
      cursor: pointer;
      margin: 0 auto;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      overflow: hidden;

      & > i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 30px;
        display: none;
        z-index: 2;
      }

      &:hover {
        & > i {
          display: block;
        }

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
        }
      }
    }

    .user-info-avatar {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-info-name {
      font-size: 24px;
      margin-top: 20px;
    }

    .user-info-desc {
      margin-top: 8px;
    }
  }

  /* 用户信息列表 */
  .user-info-list {
    margin-top: 30px;

    .user-info-item {
      margin-bottom: 16px;
      display: flex;
      align-items: baseline;

      & > i {
        margin-right: 10px;
        font-size: 16px;
      }

      & > span {
        flex: 1;
        display: block;
      }
    }
  }

  /* 用户标签 */
  .user-info-tags .el-tag {
    margin: 10px 10px 0 0;
  }

  /* 用户账号绑定列表 */
  .user-account-list {
    padding: 16px 20px;

    .user-account-item {
      padding: 15px;

      .ele-text-secondary {
        margin-top: 6px;
      }

      .user-account-icon {
        width: 42px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        color: #fff;
        font-size: 26px;
        border-radius: 50%;
        background-color: #3492ed;
        box-sizing: border-box;

        &.el-icon-_wechat {
          background-color: #4daf29;
          font-size: 28px;
        }

        &.el-icon-_alipay {
          background-color: #1476fe;
          padding-left: 5px;
          font-size: 32px;
        }
      }
    }
  }

  /* tab 页签 */
  .user-info-tabs {
    :deep(.el-tabs__nav-wrap) {
      padding-left: 24px;
    }

    :deep(.el-tabs__item) {
      height: 50px;
      line-height: 50px;
      font-size: 15px;
    }
  }
</style>
